.comment-list {
  margin-bottom: $grid-basic * 2;
}

/* コミュニティのコメント, 記事ページのコメント */
.post-comments,
.article-comments {
  .comment-heading {
    text-align: right;
    color: $brand-black;
  }
  .comment {
    @include clearfix();
  }
  .comment,
  .comment-form{
    display: block;
    padding: $grid-basic * 1.5;
    @media(max-width: $break-tablet-max) {
      padding: $grid-basic 0;
    }

    > * {
      display: block;
    }
  }
  .comment-header {
    @media(max-width: $break-tablet-max) {
      margin-bottom: $grid-basic;
    }
  }
  .comment-avatar {
    float: left;
    display: inline-block;
    width: 50px;
    img {
      max-height: 35px;
      max-width: 35px;
      border-radius: 50%;
    }
    @media(max-width: $break-tablet-max) {
      margin-bottom: $grid-basic;
    }
  }
  .comment-avatar-agent:after {
    top:20px;
    left: auto;
    right: 10px;
  }
  .comment-author {
    display: block;
    margin-left: 60px;
  }
  .comment-published {
    display: block;
    float: none;
    margin-left: 60px;
    padding:0;
    &:before {
      width: 0;
    }
  }
  .comment-body {
    p {
      margin: $grid-basic/2 0 $grid-basic 0;
      line-height: 1.3rem;
      font-size: 1rem;
    }
  }
}
.comment-form {
  @include clearfix;
  margin-bottom: $grid-basic * 5;
  padding-top: 0!important;
  h5 {
    margin-top:0;
    margin-bottom: $grid-basic;
  }
  @media(max-width: $break-tablet-max) {
    margin-bottom: 0;
  }
}
.comment-form-controls {
  display: block;
}
.comment-container {
  float: left;
  width: 90%;
  @media(max-width: $break-tablet-max) {
    width: 100%;
  }
}
.comment-noLogin {
  margin-bottom: $grid-basic * 5;
  &:empty {
    margin: 0;
  }
}

/* コミュニティページだけで使用 */
.post-comments {
  padding-left: $grid-basic * 15;
  @media(max-width: $break-tablet-max) {
    padding: 0;
  }
}

/* 記事ページだけで使用 */
.article-comments-header {
  h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: $grid-basic/2;
    border-bottom: 2px solid #DDD;
  }
}
.article-comments {
  .comment-list > *:first-child {
    border-top: none;
  }
}
.comment-footer {
  //@include clearfix;
}